In Vue.js, the v-bind:class
directive allows you to bind one or more CSS classes to an element’s class attribute. This can be useful for dynamically adding or removing classes based on the component’s state or props. The value of the directive should be an object, where the keys are the class names, and the values are Boolean expressions that determine whether the class should be added or removed.
How to Add or Remove Class to an element in Vue Js
we can use v-bind:class
directive to bind one or more CSS classes to an element’s class attribute, and determine whether the classes should be added or removed based on the component’s state or props.
In this example, the active
class will be added to the div
element if the isActive
data property is true, and removed if it is false.
Vue Js Toggle Class Binding Directive
<div id="app">
<div v-bind:class="{ active: isActive }">Font Awesome Icons</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
isActive: true
}
}
});
</script>
Output of above example
Before Toggle Class
![](https://danatec.vn/wp-content/uploads/2024/07/9-1.webp)
After Toggle Class
![](https://danatec.vn/wp-content/uploads/2024/07/10.webp)